<!--
 * @Author: windys
 * @Description: 提问
 * @Date: 2022-03-18 10:08:26
-->
<template>
  <div class="page">
    <van-nav-bar
      :title="'向' + '  ' + route.query.spcolumnUserName + '  ' + '提问'"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      fixed
    />

    <div class="sp_info">
      <van-image
        :src="spData.headUrl"
        width="50"
        height="50"
        round
        fit="contain"
      />
      <span>{{ spData.spcolumnName }}</span>
      <span>简介:{{ spData.description }}</span>
    </div>

    <div class="ques_set">
      <div class="item">
        <div>打赏给答主</div>
        <input type="tel" v-model="from.price" />
        <span>金石范围30 ~ 10,000金石</span>
      </div>
      <div class="item">
        <div>回答时间(小时)</div>
        <input type="tel" v-model="from.remain" />
        <span>规定时间内未回答，金石自动退回</span>
      </div>
    </div>

    <div class="ques_content">
      <div class="title">请输入你的问题</div>
      <textarea v-model="from.question" cols="30" rows="10"></textarea>
    </div>

    <div class="upload_content">
      <div class="title">上传图片</div>
      <div class="imglist">
        <van-image
          v-for="el in from.questionUrl"
          :key="el"
          :src="el"
          fit="contain"
          width="88"
          height="88"
        />
        <Uplaod @uploadSucc="uploadSucc"></Uplaod>
      </div>
    </div>

    <div class="ques_control">
      <div>
        <span>围观需支付:</span>
        <input
          placeholder="请输入金石数"
          type="tel"
          v-model="from.watchPrice"
        />
      </div>
      <div style="font-size: 14px">
        <van-checkbox v-model="from.openQuestion">不公开我的提问</van-checkbox>
      </div>
    </div>

    <van-button type="primary" block round @click="handleSub"
      >提交提问</van-button
    >
  </div>
</template>



<script >
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  ApiAnswerputquest,
  ApiGetspcolumnts,
  ApiGetsetamount,
} from "@/api/ques";
import { Toast } from "vant";
export default defineComponent({
  setup() {
    const instance =
      getCurrentInstance().appContext.config.globalProperties.$user || null;

    const route = useRoute();
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    onMounted(() => {
      init();
    });

    const spData = ref({});
    const init = async () => {
      const res = await ApiGetspcolumnts({
        spcolumnId: route.query.spcolumnId,
      });
      if (res) {
        spData.value = res;
      }
    };

    const from = reactive({
      spcolumnId: route.query.spcolumnId,
      spcolumnUserId: route.query.spcolumnUserId,
      nick: instance.nick,
      question: "",
      openQuestion: 0, //公开我的提问 0 公开 1不公开（默认为1，悬赏提问默认为公开）
      price: 0, //提问金石
      watchPrice: 0, //围观金石
      remain: 0, //
      questionUrl: [],
    });

    const handleSub = async () => {
      if (from.question.length < 15) {
        Toast.fail("提问字数不少于15个");
        return;
      }
      const data = { ...from };
      data.openQuestion ? (data.openQuestion = 1) : (from.openQuestion = 0);
      data.questionUrl = data.questionUrl.join(',')
      const res = await ApiAnswerputquest(data);
      if (typeof res === "string") {
        Toast.success("提问成功！");
        router.push({
          path: "/ques",
        });
      }
    };

    const uploadSucc = (url) => {
      from.questionUrl.push(url);
      console.log( from.questionUrl,'xxxxxxxx')
    };
    return {
      from,
      route,
      spData,
      onClickLeft,
      handleSub,
      uploadSucc,
    };
  },
});
</script>



<style lang="scss" scoped>
.page {
  overflow: hidden;
}
.sp_info {
  text-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  padding: 10px;
  margin-top: 50px;
  span {
    margin-top: 10px;
    color: #8d8c8c;
  }
}
.ques_set {
  font-size: 14px;
  display: flex;
  flex-direction: row;
  margin: 20px 0;
  .item {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin: 10px 0;
    align-items: center;
    div {
      font-size: 16px;
    }
    input {
      border: none;
      outline: none;
      background: #f8f4f4;
      height: 30px;
      line-height: 30px;
      width: 60%;
      margin: 5px 2px;
      border-radius: 5px;
      padding: 0 5px;
    }
    span {
      font-size: 10px;
      color: #999;
    }
  }
}

.ques_content {
  .title {
    font-size: 16px;
    padding: 0 18px;
  }
  textarea {
    border: none;
    font-size: 16px;
    width: 90%;
    border-radius: 5px;
    outline: none;
    background: #faf6f6;
    height: 100px;
    margin: 5px 5%;
    padding: 5px;
    color: #383838;
  }
}
.ques_control {
  padding: 5px 15px;
  div {
    margin: 10px 0;
    span {
      font-size: 12px;
      margin-right: 10px;
    }
    input {
      width: 50%;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      border-radius: 20px;
      border: none;
      outline: none;
      padding: 0 5px;
      background: #f5f1f1;
    }
  }
}
button {
  width: 90%;
  margin: 10px auto;
}

.upload_content {
  font-size: 16px;
  .title {
    padding: 0 15px;
  }
}
.imglist{
  padding: 0 20px;
  img{
    margin-right: 5px;
  }
}
</style>